<template>
  <div class="fluid field myfield">
      <field_title :title_show="!field.hideTitle&&!field.no_title" :field="field" ></field_title>
    <!-- <p class='ui text' v-if='$store.state.isDetail'>{{val}}</p> -->
    <div class="ui ignored info attached message" v-if='$store.state.isDetail'>
      <p>{{val}}</p>
    </div>
    <date-picker v-else :date="startTime" :option="option" :limit="limit"></date-picker>

  </div>
</template>

<script>
import tool from 'src/util/tool';
// import myDatepicker from 'vue-datepicker'
import myDatepicker from 'components/common/vue-datepicker'
import field_title from 'components/field/com/field_title';

export default {
  data() {
    return {
      val: '',
      startTime: {
        time: ''
      },
      limit: [{
        type: 'weekday',
        available: [1, 2, 3, 4, 5]
      },
      {
        type: 'fromto',
        from: '2010-02-01',
        to: '2026-02-20'
      }
      ],
      option: {
        type: 'day',
        //          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        week: ['一', '二', '三', '四', '五', '六', '日'],
        //          month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        format: 'YYYY-MM-DD',
        placeholder: '请选择日期',
        inputStyle: {},
        color: {
          header: 'rgba(0, 0, 0, 0.75)',
          headerText: 'rgba(255, 255, 255, .9)'
        },
        buttons: {
          ok: '确定',
          cancel: '取消'
        },
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      map: {}
    }
  },
  components: {
    'date-picker': myDatepicker,
      field_title
  },
  methods: {},
  watch: {
    'startTime.time': function(val, old) {
      if (val != old) {
        this.val = val
      }
    },
    val: function(val, old) {
      if (val != old) {
        this.$emit('setVo', this.field.name, val)
      }
    }
  },
  computed: {
    placeholder() {
      return `请输入${this.field.title}`
    },
  },
  props: ['field'],
  created() {
    this.val = this.field.fval
    this.startTime = {
      time: this.val
    };
    if (this.field.name == 'start_date') {
      this.limit = [{type: 'weekday',available: [1]},{type: 'fromto',from: '2010-02-01',to: '2026-02-20'}];
    }
  },
  mounted() {

  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.fluid.field {
  .datepickbox {
    input {
      display: inline-block;
      vertical-align: top;
      padding: 1px 8px;
      line-height: 19px;
      font-size: 13px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
      border-radius: 3px;
      color: #5F5F5F;
      cursor: pointer;
    }
  }
  .datepicker-overlay {
    .cov-date-body {
      .cov-date-caption {}
    }
  }
}
</style>
